<template>
  <div class="box">
    <div class="box-card" @click="handelbasicProject">
      <div class="left">
        <span class="top">项目信息</span>
        <span class="middle">{{ pronum }}条</span
        ><span class="bottom">今日新增0</span>
      </div>
      <div class="right"><img src="../../img/gg.png" alt="" /></div>
    </div>
    <div class="box-card" @click="handelbasicPersonnel">
      <div class="left">
        <span class="top">人员信息</span>
        <span class="middle">{{ personnum }}条</span
        ><span class="bottom">今日新增0</span>
      </div>
      <div class="right"><img src="../../img/gg.png" alt="" /></div>
    </div>
    <div class="box-card" @click="handelbasicCompany">
      <div class="left">
        <span class="top">公司信息</span>
        <span class="middle">{{ companynum }}条</span
        ><span class="bottom">今日新增0</span>
      </div>
      <div class="right"><img src="../../img/gg.png" alt="" /></div>
    </div>
    <div class="box-card" @click="handelbasicWarehouse">
      <div class="left">
        <span class="top">仓库信息</span>
        <span class="middle">{{ storenum }}条</span
        ><span class="bottom">今日新增0</span>
      </div>
      <div class="right"><img src="../../img/gg.png" alt="" /></div>
    </div>
    <div class="box-card" @click="handelbasicMaterial">
      <div class="left">
        <span class="top">材料信息</span> <span class="middle">6条</span
        ><span class="bottom">今日新增0</span>
      </div>
      <div class="right"><img src="../../img/gg.png" alt="" /></div>
    </div>
    <div class="box-card" @click="handelbasicRegistration">
      <div class="left">
        <span class="top">入库登记</span> <span class="middle">6条</span
        ><span class="bottom">今日新增0</span>
      </div>
      <div class="right"><img src="../../img/gg.png" alt="" /></div>
    </div>
  </div>
  <!-- 表格 -->
  <div class="dataList">
    <!-- 项目表格 -->
    <el-table
      :data="tableData"
      style="width: 49.3%"
      height="300"
      class="list"
      row-key
    >
      <el-table-column label="项目信息">
        <el-table-column
          prop="date"
          label="操作"
          width="120"
          class="columnList"
          fixed
          align="center"
        >
          <template #default="scope">
            <el-button
              type="primary"
              @click="handleclick(scope.row)"
              :dialogTableVisible="dialogTableVisible"
              size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="projectName"
          label="项目名称"
          width="170"
          align="center"
        />
        <el-table-column
          prop="userName"
          label="负责人"
          width="120"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="120"
          align="center"
        />
        <el-table-column
          prop="department"
          label="所属部门"
          width="120"
          align="center"
        />
        <el-table-column
          prop="departmentLeader"
          label="部门负责人"
          width="120"
          align="center"
        />
        <el-table-column prop="zip" label="备注" width="120" align="center" />
      </el-table-column>
    </el-table>
    <!-- 人员表格 -->
    <el-table :data="tableData" style="width: 49.3%" height="300" class="list">
      <el-table-column label="人员信息">
        <el-table-column
          fixed
          prop="date"
          label="操作"
          width="120"
          align="center"
          ><template #default="scope"
            ><el-button
              type="primary"
              @click="handleclickPeople(scope.row)"
              :peopleDialogTableVisible="peopleDialogTableVisible"
              size="small"
              >查看</el-button
            ></template
          ></el-table-column
        >
        <el-table-column
          prop="userName"
          label="姓名"
          width="120"
          align="center"
        />
        <el-table-column
          prop="jobNumber"
          label="编号"
          width="120"
          align="center"
        />
        <el-table-column prop="sex" label="性别" width="120" align="center" />
        <el-table-column prop="job" label="职务" width="120" align="center" />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="120"
          align="center"
        />
        <el-table-column
          prop="nameID"
          label="身份证号"
          width="120"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="170"
          align="center"
        />
        <el-table-column
          prop="department"
          label="所在部门"
          width="120"
          align="center"
        />
        <el-table-column
          prop="accStatus"
          label="当前状态"
          width="120"
          align="center"
        />
        <el-table-column prop="zip" label="备注" width="120" align="center" />
      </el-table-column>
    </el-table>
    <!-- 公司表格 -->
    <el-table :data="firmsData" style="width: 49.3%" height="300" class="list">
      <el-table-column label="公司信息">
        <el-table-column
          fixed
          prop="date"
          label="操作"
          width="120"
          align="center"
          ><template #default="scope"
            ><el-button
              type="primary"
              @click="handleclickPro(scope.row)"
              :peopleDialogTableVisible="peopleDialogTableVisible"
              size="small"
              >查看</el-button
            ></template
          ></el-table-column
        >
        <el-table-column
          prop="supplierName"
          label="公司名称"
          width="120"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          prop="supplierContacts"
          label="联系人"
          width="120"
          align="center"
        />
        <el-table-column
          prop="supplierPhone"
          label="电话"
          width="120"
          align="center"
        />
        <el-table-column prop="fax" label="传真" width="120" align="center" />
        <el-table-column
          prop="zip"
          label="微信公众号"
          width="120"
          align="center"
        />
      </el-table-column>
    </el-table>
    <!-- 仓库表格 -->
    <el-table :data="whouseData" style="width: 49.3%" height="300" class="list">
      <el-table-column label="仓库信息">
        <el-table-column
          fixed
          prop="date"
          label="操作"
          width="120"
          align="center"
          ><template #default="scope"
            ><el-button
              type="primary"
              @click="handleWhouse(scope.row)"
              :peopleDialogTableVisible="peopleDialogTableVisible"
              size="small"
              >查看</el-button
            ></template
          ></el-table-column
        >
        <el-table-column
          prop="storeName"
          label="仓库名称"
          width="120"
          align="center"
        />
        <el-table-column
          prop="storeAddress"
          label="仓库地址"
          width="120"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          prop="materialClass"
          label="存货种类"
          width="120"
          align="center"
        />
        <el-table-column
          prop="storeLeader"
          label="负责人"
          width="120"
          align="center"
        />
        <el-table-column prop="zip" label="备注" width="120" align="center" />
      </el-table-column>
    </el-table>
  </div>
  <!-- echarts -->
  <div class="echarts">
    <div class="leftcharts">
      <div>自定义柱状图</div>
      <div style="width: 600px; height: 300px" ref="chartRef"></div>
    </div>
    <div class="rightcharts">
      <div>自定义饼状图</div>
      <div style="width: 600px; height: 300px" ref="caketRef"></div>
    </div>
  </div>

  <!-- 对话框 -->

  <!-- 项目信息 -->
  <el-dialog
    v-model="dialogTableVisible"
    title="项目信息-查看"
    width="90%"
    align-center
  >
    <el-table :data="gridData">
      <el-table-column property="projectName" label="项目名称" width="150" />
      <el-table-column property="phone" label="联系电话" width="150" />
      <el-table-column property="userName" label="负责人" width="200" />
      <el-table-column property="departmentLeader" label="部门负责人" />
      <el-table-column property="department" label="所属部门" width="150" />
      <el-table-column property="phone" label="联系手机" width="150" />
      <el-table-column property="postscript" label="备注" width="150" />
    </el-table>
  </el-dialog>
  <!-- 人员信息 -->
  <el-dialog
    v-model="peopleDialogTableVisible"
    title="人员信息-查看"
    width="90%"
    align-center
  >
    <el-table :data="peopleData">
      <el-table-column property="userName" label="姓名" width="150" />
      <el-table-column property="jobNumber" label="编号" width="150" />
      <el-table-column property="sex" label="性别" width="200" />
      <el-table-column property="job" label="职务" />
      <el-table-column property="phone" label="联系电话" width="150" />
      <el-table-column property="nameID" label="身份证号" width="150" />
      <el-table-column property="projectName" label="项目名称" width="150" />
      <el-table-column property="department" label="所在部门" width="150" />
      <el-table-column property="accStatus" label="账号状态" width="150" />
    </el-table>
  </el-dialog>
  <!-- 公司信息 -->
  <el-dialog
    v-model="ProDialogTableVisible"
    title="公司信息-查看"
    width="90%"
    align-center
  >
    <el-table :data="gridData">
      <el-table-column property="supplierName" label="公司名称" width="150" />
      <el-table-column property="supplierContacts" label="联系人" width="150" />
      <el-table-column property="supplierPhone" label="电话" width="200" />
      <el-table-column property="fax" label="传真" />
      <el-table-column property="zip" label="微信公众号" width="150" />
    </el-table>
  </el-dialog>
  <!-- 仓库信息 -->
  <el-dialog
    v-model="whouseDialogTableVisible"
    title="仓库信息-查看"
    width="90%"
    align-center
  >
    <el-table :data="gridData">
      <el-table-column property="storeName" label="仓库名称" width="150" />
      <el-table-column property="storeAddress" label="仓库地址" width="150" />
      <el-table-column property="materialClass" label="存货种类" width="200" />
      <el-table-column property="storeLeader" label="负责人" />
      <el-table-column property="zip" label="备注" width="150" />
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import router from '@/router'
//跳转项目信息
const handelbasicProject = () => {
  router.push('/basicInformation/project')
}
//跳转人员信息
const handelbasicPersonnel = () => {
  router.push('/basicInformation/personnel')
}
//跳转公司信息
const handelbasicCompany = () => {
  router.push('/basicInformation/company')
}
//跳转仓库信息
const handelbasicWarehouse = () => {
  router.push('/basicInformation/warehouse')
}
// 跳转材料信息
const handelbasicMaterial = () => {
  router.push('/basicInformation/material')
}
// 跳转入库登记
const handelbasicRegistration = () => {
  router.push('/warehousing/registration')
}

import { getPeopleInfo } from '../../api/getapi'
import { getMaterialInfo } from '../../api/getapi'
import { onMounted, ref } from 'vue'

//引入echarts
import * as echarts from 'echarts'
//box数据
// 项目信息数量
let pronum = ref('')
//人员信息数量
let personnum = ref('')
//公司信息数量
let companynum = ref('')
//仓库信息数量
let storenum = ref('')
// 表格
const tableData = ref<any[]>([])
const firmsData = ref<any[]>([])
const whouseData = ref()
const gridData = ref<any>([])
const peopleData = ref()
// 饼图数据
const chartData: any = ref([
  { value: 3, name: '全部' },
  { value: 1, name: '男' },
  { value: 2, name: '女' },
])
//柱状图数据
const columnData: any = ref([4, 2, 5, 5])

// 饼图
const caketChart = ref<any>()
//柱状图
const columnChart = ref<any>()
const getPersonIfo = async () => {
  const result: any[] = await getPeopleInfo()
  tableData.value = result
  pronum = result.length
  personnum = result.length
  columnData.value = [
    result.filter((item) => item.age < 15).length,
    result.filter((item) => item.age > 15 && item.age < 25).length,
    result.filter((item) => item.age > 25 && item.age < 35).length,
    result.filter((item) => item.age > 35).length,
  ]
  columnChart.value.setOption({
    series: [
      {
        data: columnData.value,
        type: 'bar',
      },
    ],
  })
  chartData.value = [
    {
      name: '全部',
      value: result.length,
    },
    {
      name: '男',
      value: result.filter((item) => item.sex === '男').length,
    },
    {
      name: '女',
      value: result.filter((item) => item.sex === '女').length,
    },
  ]
  // console.log(123)
  caketChart.value.setOption({
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: chartData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })
}
const getfirdata = async () => {
  const firResult = await getMaterialInfo()
  companynum = firResult.length
  storenum = firResult.length
  console.log(firResult)
  firmsData.value = firResult
  // console.log(123)
}
const getWhouse = async () => {
  const whouseResult = await getMaterialInfo()
  whouseData.value = whouseResult
}
// 项目信息-查看
const handleclick = (result: any) => {
  dialogTableVisible.value = true
  const arr = []
  arr.push(result)
  gridData.value = arr
}
// 人员信息-查看
const handleclickPeople = (result: any) => {
  peopleDialogTableVisible.value = true
  const arr = []
  arr.push(result)
  // chartData.value = arr
  peopleData.value = arr
}
// 公司信息-查看
const handleclickPro = (result: any) => {
  ProDialogTableVisible.value = true
  const arr = []
  arr.push(result)
  gridData.value = arr
}
// 仓库信息-查看
const handleWhouse = (result: any) => {
  whouseDialogTableVisible.value = true
  const arr = []
  arr.push(result)
  gridData.value = arr
}
getPersonIfo()
getfirdata()
getWhouse()
const chartRef: any = ref()
const caketRef: any = ref()
onMounted(() => {
  addchartLeft()
  addchartright()
})
//echarts 柱状图
const addchartLeft: any = () => {
  const myChart = (columnChart.value = echarts.init(chartRef.value))
  let option: any
  option = {
    xAxis: {
      type: 'category',
      data: ['0-15岁', '15-25岁', '25-35岁', '35以上'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: columnData.value,
        type: 'bar',
      },
    ],
    legend: {
      orient: 'vertical',
      left: 'right',
    },
  }
  option && myChart.setOption(option)
}
//饼状图
const addchartright: any = () => {
  const myChart = (caketChart.value = echarts.init(caketRef.value))
  let option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'right',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: chartData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  option && myChart.setOption(option)
}
//对话框
let dialogTableVisible = ref(false)
let peopleDialogTableVisible = ref(false)
let ProDialogTableVisible = ref(false)
let whouseDialogTableVisible = ref(false)
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 101px;
  display: flex;
  justify-content: space-around;
}

.box-card {
  width: 200px;

  height: 100px;
  display: flex;
  // border: 1px solid;
  border-radius: 5%;
  box-shadow: 2px 2px 8px 1px #999;
  align-items: center;
}

.box-card:hover {
  border: 1px solid skyblue;
}

.left {
  display: flex;
  flex-direction: column;
  margin-right: 40px;

  .middle {
    color: red;
    margin-bottom: 4px;
  }

  .top {
    margin-bottom: 15px;
    font-size: large;
  }

  .bottom {
    font-size: small;
  }
}

.dataList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: space-around;
}

.list {
  box-shadow: 3px 1px 6px 0px rgba(192, 205, 224, 0.3),
    -3px 1px 6px 0px rgba(192, 205, 224, 0.3);
  border: 1px solid #c7d0e5;
  margin-bottom: 10px;
  background-color: #c7d0e5;
}

:deep(.el-scrollbar) {
  background-color: aliceblue;
}

.echarts {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-around;

  .leftcharts {
    width: 49.3%;
    margin-bottom: 10px;
    border: 1px solid #c7d0e5;
    border-radius: 3px;
    box-shadow: 3px 1px 6px 0px rgba(192, 205, 224, 0.3),
      -3px 1px 6px 0px rgba(192, 205, 224, 0.3);
  }

  .rightcharts {
    width: 49.3%;
    margin-bottom: 10px;
    border: 1px solid #c7d0e5;
    border-radius: 3px;
    box-shadow: 3px 1px 6px 0px rgba(192, 205, 224, 0.3),
      -3px 1px 6px 0px rgba(192, 205, 224, 0.3);
  }
}
</style>
